<template>
  <div>
    <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
        style="font-weight: bold;">新增已进入本区教职工编制的人员基本信息
      </span> </div>
    <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;"><span
        style="font-weight: bold;">提示：新增[本区]在编教职工信息有右侧可选的两个方式，请选择
      </span>
      <div style="float: right;">
        <el-radio v-model="radio" label="1" @input="radioInput">表单逐一输入方式</el-radio>
        <el-radio v-model="radio" label="2" @input="radioInput" disabled>EXCEL表格批量导入方式</el-radio>
      </div>
    </div>
    <div v-if="radio == 1">
      <div style="text-align: center;display: ruby-text;margin-top: 180px;">
        <div style="width: 600px;height: 40px;background-color: bisque;line-height: 40px;">
          请下面输入需要新增教职工的关键信息后，点击"新增"
        </div>

      </div>
      <div style="text-align: center;display: ruby-text;margin-top: 20px;">
        请选择新增教职工的证件类型:
        <el-select v-model="sfzlxval" placeholder="请选择" style="width: 300px;">
          <el-option v-for="(item, index) in sfzlx" :key="index" :label="item.mc" :value="item.dm">
          </el-option>
        </el-select>
      </div>

      <div style="text-align: center;display: ruby-text;margin-top: 20px;">
        请输入新增教职工的证件号码:
        <el-input v-model="sfzjh" placeholder="请输入证件号码" style="width: 300px;"></el-input>
      </div>
      <div style="text-align: center;display: ruby-text;margin-top: 20px;">
        <el-button type="primary" style="color: #fff;" @click="shenheSel">核查后新增</el-button>
      </div>
    </div>

    <div v-if="radio == 2">
      <div style="text-align: center;display: ruby-text;margin-top: 180px;">
        <div style="width: 600px;height: 40px;background-color: bisque;line-height: 40px;">
          仅能批量导入中国籍且以居民身份证号为关键信息的教职工，请使用导入模板文件导入
        </div>
      </div>
      <div style="text-align: center;display: ruby-text;margin-top: 20px;">
        批量导入教职工信息的模板文件下载链接:
        <a href="" style="text-decoration: underline;">崇明区教职工信息导入模板文件</a>
      </div>
      <div style="text-align: center;display: ruby-text;margin-top: 20px;">
        请正确选择批量导入教职工编制所在的校区:
        <el-select v-model="value" placeholder="请选择" style="width: 300px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="text-align: center;display: ruby-text;margin-top: 20px;">
        请选择导入教职工基本信息的EXCEL数据文件:
        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
          :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">（已在下载的模板文件中添加了教职工信息）</div>
        </el-upload>
      </div>
      <div style="text-align: center;display: ruby-text;margin-top: 20px;">
        <el-button type="primary" style="color: #fff;">开始从EXCEL导入</el-button>
      </div>
    </div>

    <el-dialog title="请输入新增教职工的下列基本信息" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
      <div>
        <div style="width:100%;">
          <table border='0' cellspacing="0" cellpadding="0"
            style="border-collapse:collapse;border-style:none;font-family:宋体;font-size:13px; width:100%; ">
            <tr>
              <td class="td1" style=" width:100px;">
                身份证件类型
              </td>
              <td class="td1" style=" width:200px;">
                <span v-text="sfzlxLabel"></span>
              </td>
              <td class="td1" style=" width:100px;">
                身份证件号码
              </td>
              <td class="td1">
                <span v-text="sfzjh"></span>
              </td>

            </tr>
            <tr>
              <td class="td1">
                <span style="color: red;">*</span>姓名
              </td>
              <td class="td1">
                <el-input v-model="name" placeholder="请输入姓名"></el-input>
              </td>
              <td class="td1">
                性别
              </td>
              <td class="td1">
                <el-radio v-model="radiosex" label="1">男</el-radio>
                <el-radio v-model="radiosex" label="2">女</el-radio>
              </td>
            </tr>
            <tr>
              <td class="td1">
                国家地区
              </td>
              <td class="td1">
                <el-select v-model="country" placeholder="请选择">
                  <el-option v-for="(item, index) in countryArr" :key="index" :label="item.mc" :value="item.dm">
                  </el-option>
                </el-select>
              </td>
              <td class="td1">
                民族
              </td>
              <td class="td1">
                <el-select v-model="mz" placeholder="请选择">
                  <el-option v-for="(item, index) in mzArr" :key="index" :label="item.mc" :value="item.dm">
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="td1">
                政治面貌
              </td>
              <td class="td1">
                <el-select v-model="zzmm" placeholder="请选择">
                  <el-option v-for="(item, index) in zzmmArr" :key="index" :label="item.mc" :value="item.dm">
                  </el-option>
                </el-select>
              </td>
              <td class="td1">
                出生年月
              </td>
              <td class="td1">
                <el-date-picker v-model="birth" type="date" placeholder="选择日期">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td class="td1">
                现在编单位
              </td>
              <td class="td1">
                <span v-text="xiaoquText"></span>
              </td>
              <td class="td1">
                编制所在校区
              </td>
              <td colspan="2" class="td1">
                <el-select v-model="xiaoqu" placeholder="请选择" @change="onChange">
                  <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC" :value="item.NEW_XQDM">
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="td1">
                现工作单位
              </td>
              <td class="td1">
                <span v-text="gzxiaoquText"></span>
              </td>
              <td class="td1">
                工作校区
              </td>
              <td colspan="2" class="td1">
                <el-select v-model="gzxiaoqu" placeholder="请选择" @change="onChange2">
                  <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC" :value="item.NEW_XQDM">
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="td1">
                教职工编号
              </td>
              <td class="td1">
                <span>{{ faculty ? faculty.TeacherId : "待编制" }}</span>
              </td>
              <td class="td1">
                登记状态
              </td>
              <td colspan="2" class="td1">
                <span>正常在岗</span>
              </td>
            </tr>
            <tr>
              <td class="td1">
                联系电话
              </td>
              <td class="td1">
                <el-input v-model="phone" placeholder="请输入联系电话"></el-input>
              </td>

            </tr>

          </table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">提 交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import httpdict from "../../api/dict";
import httplogin from "../../api/login";
export default {
  name: 'Success',

  data() {
    return {
      phone: "",
      sfzjh: "",
      dialogVisible: false,
      value1: "",
      radio: "1",
      radiosex: "1",
      sfzlx: [],
      sfzlxval: '1',
      type: true,
      countryArr: [],
      country: "156",
      mzArr: [],
      mz: "1",
      zzmmArr: [],
      zzmm: "13",
      sfzlxLabel: "",
      birth: "",
      faculty: "",
      schoolList: "",
      xiaoqu: "3101517061",
      gzxiaoqu: "3101517061",
      xiaoquText: "",
      gzxiaoquText: "",
      name: "",
    }
  },
  mounted() {
    this.getshzjlxway()
  },
  methods: {
    async getshzjlxway() {
      var res = await httpdict.getshzjlx();
      if (res.data.code == 200) {
        this.sfzlx = res.data.data.sfzlx;
      }
    },
    async onSubmit() {
      if (this.name == "") {
        this.$message({
          type: 'error',
          message: "请输入教职工姓名"
        });
        return
      }
      var data = {
        sfzjlx: this.sfzlxval,
        sfzjh: this.sfzjh,
        xm: this.name,
        xbm: this.radiosex,
        gjdq: this.country,
        mz: this.mz,
        zzmm: this.zzmm,
        csny: this.birth,
        djXqdm: this.xiaoqu,
        gzXqdm: this.gzxiaoqu,
        gwzt: "01",
        lxdh: this.phone
      }
      var res = await httplogin.saveFaculty(data);
      console.log(res)
      if (res.data.code == 200) {
        this.$message({
          type: 'success',
          message: res.data.msg
        });
        this.dialogVisible = false
      }
    },
    onChange(e) {
      for (let i = 0; i < this.schoolList.length; i++) {
        if (e == this.schoolList[i].NEW_XQDM) {
          this.xiaoquText = this.schoolList[i].XQJC
          break
        }
      }
    },
    onChange2(e) {
      for (let i = 0; i < this.schoolList.length; i++) {
        if (e == this.schoolList[i].NEW_XQDM) {
          this.gzxiaoquText = this.schoolList[i].XQJC
          break
        }
      }
    },
    async shenheSel() {
      if (this.sfzlxval == "") {
        this.$message({
          type: 'error',
          message: "请选择身份证类型"
        });
        return
      }
      if (this.sfzjh == "") {
        this.$message({
          type: 'error',
          message: "请输入身份证号"
        });
        return
      }

      var data = {
        sfzjh: this.sfzjh,
        sfzjlx: this.sfzlxval
      }
      var res = await httplogin.examineCard(data)
      if (res.data.code == 200) {
        if (res.data.data.examine) {
          this.$alert("本身份证号已经在本区教职工信息库中存在!<br/>应利用系统的调动或借用功能", '提示', {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true,
            callback: action => {
              // this.$message({
              //   type: 'info',
              //   message: ``
              // });
            }
          });
        } else {
          this.GetCountryway();
          this.GetZzmmway();
          this.GetMzway();
          for (let i = 0; i < this.sfzlx.length; i++) {
            if (this.sfzlxval == this.sfzlx[i].dm) {
              this.sfzlxLabel = this.sfzlx[i].mc
              break
            }
          }
          this.birth = this.idCard(this.sfzjh, 1);
          this.radiosex = this.idCard(this.sfzjh, 2)

          this.getUserPermissionInfofun();
          this.dialogVisible = true
        }
      } else {
        this.$message({
          type: 'error',
          message: res.data.msg
        });
      }
    },
    async getUserPermissionInfofun() {
      let res = await httplogin.getUserPermissionInfo();
      if (res.data.code == 200) {
        // if (res.data.data.estate == "区级") {
          this.schoolList = res.data.data.UserPermission
          this.sortPingyinfun(this.schoolList)

          for (let i = 0; i < this.schoolList.length; i++) {
            if (this.xiaoqu == this.schoolList[i].NEW_XQDM) {
              this.xiaoquText = this.schoolList[i].XQJC
              this.gzxiaoquText = this.schoolList[i].XQJC
              break
            }
          }


          this.getFacultyinitialway();

        // }
      }
    },
    sortPingyinfun(list) {
      list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
      return list
    },
    async getFacultyinitialway() {
      var data = {
        sfzjh: this.sfzjh,
        sfzjlx: this.sfzlxval
      }
      var res = await httplogin.getFacultyinitial(data);
      if (res.data.code == 200) {
        this.faculty = res.data.data.faculty;
        if (this.faculty) {
          this.name = this.faculty.XM
          this.phone = this.faculty.LXDH
          this.xiaoqu = this.faculty.DJ_XQDM
          this.xiaoquText = this.faculty.XQJC
          this.gzxiaoqu = this.faculty.GZ_XQDM
          for (let i = 0; i < this.schoolList.length; i++) {
            if (this.gzxiaoqu == this.schoolList[i].NEW_XQDM) {
              this.gzxiaoquText = this.schoolList[i].XQJC
              break
            }
          }
        }

      }
    },
    async GetCountryway() {
      var res = await httpdict.GetCountry();
      if (res.data.code == 200) {
        this.countryArr = res.data.data.sfzlx;
      }
    },
    async GetMzway() {
      var res = await httpdict.GetMz();
      if (res.data.code == 200) {
        this.mzArr = res.data.data.sfzlx;
      }
    },
    async GetZzmmway() {
      var res = await httpdict.GetZzmm();
      if (res.data.code == 200) {
        this.zzmmArr = res.data.data.sfzlx;
      }
    },
    //通过身份证号计算年龄、性别、出生日期
    idCard(userCard, num) {
      //获取出生日期
      var birth;
      if (num == 1) {
        birth = userCard.substring(6, 10) + "-" + userCard.substring(10, 12) + "-" + userCard.substring(12, 14);
        return birth;
      }
      //获取性别
      if (num == 2) {
        if (parseInt(userCard.substr(16, 1)) % 2 == 1) {
          return "1";
        } else {
          return "2";
        }
      }
      //获取年龄
      if (num == 3) {
        var myDate = new Date();
        var month = myDate.getMonth() + 1;
        var day = myDate.getDate();
        var age = myDate.getFullYear() - userCard.substring(6, 10) - 1;
        if (userCard.substring(10, 12) < month || userCard.substring(10, 12) == month && userCard.substring(12, 14) <= day) {
          age++;
        }
        return age;
      }
    }


  }
}
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
  background-color: #ff4d4f !important;
}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #fff !important;
  /* font-weight: 600; */
}

.td1 {
  border: 1px solid #8c8c8c;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #3c3c3c;
  padding: 3px;
  width: 40%;
}

.inputbox {
  text-align: center;
  line-height: 25px;
  border: 1px solid #b3b3b3;
  font-size: 13px;
  height: 25px;
  width: 96%;
}

.rblList td {
  font-size: 13px;
  color: #3c3c3c;
  border-style: none;
  text-align: left;
  height: 30px;
  line-height: 30px;
}

.result-success {
  .action:not(:first-child) {
    margin-left: 8px;
  }

  .project-name {
    font-size: 16px;
    color: @title-color;
    font-weight: 500;
    margin-bottom: 20px;
  }
}
</style>